<script setup name="DcmTagsWnd">
import { ref, watch } from "vue";
import { debounce } from "@kitware/vtk.js/macros";

const dialogVisible = ref(false);
const fullData = ref(null);
const dcmtagData = ref(null);
const findText = ref("");

watch(findText, val => {
	const debouncedFilter = debounce(() => {
		const lval = val.toLowerCase();
		const newData = fullData.value.filter(item => {
			return (
				item.tagid.toLowerCase().includes(lval) ||
				item.desc.toLowerCase().includes(lval) ||
				item.value.toLowerCase().includes(lval)
			);
		});

		dcmtagData.value = newData;
	}, 300);

	debouncedFilter();
});

const show = data => {
	fullData.value = data || [];
	dcmtagData.value = data || [];
	dialogVisible.value = true;
	// console.log("showDcmTagsWnd data: ", fullData);
};

defineExpose({ show });
</script>

<template>
	<div class="dcmtag">
		<el-dialog
			title="DICOM TAGS"
			v-model="dialogVisible"
			:modal="false"
			:close-on-click-modal="false"
			width="820px"
			draggable
		>
			<el-table :data="dcmtagData" border height="600px">
				<el-table-column
					property="tagid"
					label="TagId"
					width="100"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column property="vr" label="VR" width="50"></el-table-column>
				<el-table-column property="vm" label="VM" width="50"></el-table-column>
				<el-table-column property="len" label="Length" width="80"></el-table-column>
				<el-table-column
					property="desc"
					label="Description"
					width="250"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					property="value"
					label="Value"
					width="290"
					:show-overflow-tooltip="true"
				></el-table-column>
			</el-table>
			<el-input
				v-model="findText"
				placeholder="Find Text..."
				clearable
				style="width: 300px; margin: 2px 6px"
			></el-input>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
.dcmtag {
	user-select: text;
}

.finder {
	display: flex;
	.finder__label {
		width: 60px;
	}
}

:deep(.el-dialog__header) {
	background: #eee;
	height: 40px;
	padding: 8px 8px;
	border: none;
	text-align: left;
}

:deep(.el-dialog__title) {
	color: #444;
}

:deep(.el-dialog) {
	padding: 0;
}

:deep(.el-table__header .is-leaf) {
	background-color: white;
	color: #444;
}

:deep(.el-table__cell) {
	background-color: white;
	color: #444;
	padding: 4px 0px;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
	background-color: lightblue;
}

:deep(.el-table--border .el-table__cell:first-child .cell) {
	padding-left: 4px;
}
</style>
